<script setup lang="ts">
import { getAllDeps } from '@/services/consult';
import { useConsultStore } from '@/stores';
import type { TopDep } from '@/types/consult'
import { computed } from 'vue';
import { onMounted } from 'vue';
import { ref } from 'vue'
const store = useConsultStore()
// 默认激活的索引
const active = ref(0)
// 获取科室数据
const topDeps = ref<TopDep[]>([])
onMounted(async () => {
  const { data } = await getAllDeps()
  topDeps.value = data
  // 默认显示第一个一级科室对应的数据
  // subDeps.value = data[0].child
})

// 获取二级科室
// 方式一: 给父组件绑定点击事件
/*
const subDeps = ref<SubDep[]>()
const changeTopDeps = (id: string) => {
  subDeps.value = topDeps.value.find(v => v.id === id)?.child
} */
// 方式二：根据active和一级诊室数据计算得到
const subDeps = computed(() => topDeps.value[active.value]?.child)

</script>

<template>
  <div class="consult-dep-page">
    <cp-nav-bar title="选择科室" />
    <div class="wrapper">
      <!-- 一级诊室 -->
      <van-sidebar v-model="active">
        <!--  <van-sidebar-item @click="changeTopDeps(item.id)" v-for="item in topDeps" :key="item.id" :title="item.name" /> -->
        <van-sidebar-item v-for="item in topDeps" :key="item.id" :title="item.name" />
      </van-sidebar>
      <!-- 二级诊室 -->
      <div class="sub-dep">
        <router-link v-for="item in subDeps" :key="item.id" to="/consult/illness" @click="store.setDepId(item.id)">{{
          item.name }}</router-link>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.consult-dep-page {
  padding-top: 46px;

  .wrapper {
    height: calc(100vh - 46px);
    overflow: hidden;
    display: flex;

    .van-sidebar {
      width: 114px;

      &-item {
        padding: 14px;
        color: var(--cp-tag);

        &--select {
          color: var(--cp-main);
          font-weight: normal;

          &::before {
            display: none;
          }
        }
      }
    }

    .sub-dep {
      flex: 1;
      height: 100%;
      overflow-y: auto;

      >a {
        display: block;
        padding: 14px 30px;
        color: var(--cp-dark);
      }
    }
  }
}
</style>